import { useState, useContext, useEffect } from "react";
import { Checkbox, Row, Col, Tag } from 'antd';
import { PlusOutlined, MinusOutlined } from '@ant-design/icons';
import { AppContext } from "../../store";
import { UPDATE_PARAMS } from "../../store/actionType";
import Scrollbars from 'react-custom-scrollbars';
export default function CateMenu(props) {
  const [colorState, setColorState] = useState(false);
  const [sizeState, setSizeState] = useState(false);
  const { dispatch, appData } = useContext(AppContext);
  const [defalutCate, setCate] = useState([])
  const [actType,setAct] = useState([]);
  const seasonArr = [{
    value: '01',
    label: 'Spring & Summer'
  }, {
    value: '02',
    label: 'Autumn & Winter'
  }]
  const handleToggle = () => {
    const state = !colorState;
    setColorState(state);
  };
  const handleToggle3 = () => {
    const state = !sizeState;
    setSizeState(state);
  };
  const handleChangeSeason = (e) => {
    dispatch({
      type: UPDATE_PARAMS,
      data: { season: e }
    })

    props.getData({ ...appData.params, ...{ season: e } })
  }
  const handleChangeCate = (e) => {
    console.log('e', e)
    setCate(e)
    dispatch({
      type: UPDATE_PARAMS,
      data: { productSubCate: e }
    })
    props.getData({ ...appData.params, ...{ productSubCate: e } })
  }
  const handleChangeActivity = (e) => {
    console.log('e', e)
    let cate = null
    
    setAct(e)
    dispatch({
      type: UPDATE_PARAMS,
      data: { sortType: cate }
    })
    props.getData({ ...appData.params, ...{ sortType: e } })
  }
  const handleChangeColor = (e) => {
    dispatch({
      type: UPDATE_PARAMS,
      data: { color: e }
    })
    props.getData({ ...appData.params, ...{ color: e } })
  }
  const handleChangeSize = (e) => {

    dispatch({
      type: UPDATE_PARAMS,
      data: { size: e }
    })
    props.getData({ ...appData.params, ...{ size: e } })
  }
  useEffect(() => {
    setCate([props.cate])
    if(props.sortType){
      console.log('props.sortType',[props.sortType])
      setAct([props.sortType])
    }
    console.log('props.cate', props.cate)
  }, [props.cate,props.sortType])
  return (
    <div id="column-left" className="column-left">
      <Scrollbars style={{ height: '100vh' }} className="scrollbar">
        {props.mobile && <div className="search-tips">
          <h1 className="title">{appData.cateName}</h1>

        </div>}
        <div className="Categories left-sidebar-widget">
          <div className="columnblock-title">
            Season
          </div>
          <div className="category_block">
            <Checkbox.Group onChange={handleChangeSeason}>
              <Row gutter={[0, 10]}>
                {
                  seasonArr.map((item, index) => {
                    return (
                      <Col span={24} key={index}>
                        <Checkbox value={item.value} key={item.value}>{item.label}</Checkbox>
                      </Col>
                    )
                  })
                }
              </Row>
            </Checkbox.Group>
          </div>
        </div>
        {!props.sortType && <div className="filter left-sidebar-widget">
          <div className="columnblock-title">
            Categories
          </div>
          <div className="category_block">

            <Checkbox.Group onChange={handleChangeCate} value={defalutCate}>
              <Row gutter={[0, 10]}>
                {
                  props.data && props.data.map((item, index) => {
                    return (
                      <Col span={24} key={index}>
                        <Checkbox value={item.code} key={item.id}>{item.cateEnName}</Checkbox>
                      </Col>
                    )
                  })
                }
              </Row>
            </Checkbox.Group>

          </div>
        </div>}
       
        {props.sortType && ['yoga','running','casual','workout'].includes(props.sortType) && <div className="filter left-sidebar-widget">
          <div className="columnblock-title">
            Activity
          </div>
          <div className="category_block">

            <Checkbox.Group onChange={handleChangeActivity} value={actType}>
              <Row gutter={[0, 10]}>
                <Col span={24}>
                  <Checkbox value={'yoga'} key={1}>YOGA</Checkbox>
                </Col>
                <Col span={24}>
                  <Checkbox value={'running'} key={2}>RUNNING</Checkbox>
                </Col>
                <Col span={24}>
                  <Checkbox value={'casual'} key={3}>CASUAL</Checkbox>
                </Col>
                <Col span={24}>
                  <Checkbox value={'workout'} key={4}>WORKOUT</Checkbox>
                </Col>
              </Row>
            </Checkbox.Group>

          </div>
        </div>}
        <div className="filter left-sidebar-widget">
          <div className="columnblock-title">Filters</div>
          <div className="category_block">
            <ul className="box-category">
              <li>
                <div className="toggle-title" onClick={handleToggle}>
                  Color
                  {colorState ? <MinusOutlined style={{ marginRight: '15px' }} /> : <PlusOutlined style={{ marginRight: '15px' }} />}
                </div>
                <Checkbox.Group onChange={handleChangeColor} style={{ display: colorState ? 'block' : 'none' }} >
                  <Row gutter={[0, 10]}>
                    {
                      props.color && props.color.map((item, index) => {
                        return (
                          <Col span={12} key={index}>
                            <Checkbox value={item.id} key={item.id}>{item.enName}<div style={{ background: item.name, width: "20px", height: "20px", borderRadius: "10px" }}></div></Checkbox>
                          </Col>
                        )
                      })
                    }
                  </Row>
                </Checkbox.Group>

              </li>

              <li>
                <div className="toggle-title" onClick={handleToggle3}>
                  Size
                  {sizeState ? <MinusOutlined style={{ marginRight: '15px' }} /> : <PlusOutlined style={{ marginRight: '15px' }} />}
                </div>
                <Checkbox.Group onChange={handleChangeSize} style={{ display: sizeState ? 'block' : 'none' }}>
                  <Row gutter={[0, 10]}>
                    {
                      props.size && props.size.map((item, index) => {
                        return (
                          <Col span={12} key={index}>
                            <Checkbox value={item.id} key={item.id}>{item.name}</Checkbox>
                          </Col>
                        )
                      })
                    }
                  </Row>
                </Checkbox.Group>
              </li>
            </ul>
          </div>
        </div>
      </Scrollbars>
    </div>
  );
}
